<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="include/css-head :: css-head">
</head>
<style>
    textarea{
        width:100%;
        height:100px;
    }

    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }
    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }

    .chk_1{
        display: none;
    }
    .chk_1 + label {
        background-color: #FFF;
        border: 1px solid #C1CACA;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 9px;
        border-radius: 5px;
        display: inline-block;
        position: relative;
        margin-right: 30px;
    }
    .chk_1 + label:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }

    .chk_1:checked + label {
        background-color: #ECF2F7;
        border: 1px solid #92A1AC;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
        color: #243441;
    }

    .chk_1:checked + label:after {
        content: '\2714';
        position: absolute;
        top: 0px;
        left: 0px;
        color: #758794;
        width: 100%;
        text-align: center;
        font-size: 1.4em;
        padding: 1px 0 0 0;
        vertical-align: text-top;
    }
    div.cbp label.font{
        text-align: center;
        font-size: 1.4em;
        vertical-align: text-top;
        margin-top: -15px;
        margin-left: -10px;
    }

</style>
<body>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        欢迎欢迎 热烈欢迎，
        <small>客官您好</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 系统管理</a></li>
        <li class="active">用户管理</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">用户列表</h3>
            <br><br>
            <button th:if="${QX.add == '1' && QX.query == '1'}" class="btn btn-success btn-sm" id="addUser"><i class="fa fa-plus"></i> &nbsp;&nbsp;添加用户</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="roleList" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>地区</th>
                    <th>价格</th>
                </tr>
                </thead>
                <tbody>
                <tr  th:each="apple,stat :${apple}">
                    <td th:text="${stat.count}">1</td>
                    <td th:text="${apple.name}">用户ID</td>
                    <td th:text="${apple.area}">丢去</td>
                    <td th:text="${apple.price}">用户名称</td>
                    <td>
                        <div >
                            <!--<span data-toggle="tooltip"  data-placement="left" title="给用户分配角色" th:if="${QX.edit == '1'}" class="btn btn-xs btn-primary" th:onclick="'allotRole(\''+${user.user_id}+'\');'"><i class="fa fa-user-md"></i> 分配角色</span>-->
                            <span data-toggle="tooltip"  data-placement="left" title="编辑用户信息" th:if="${QX.edit == '1'}" class="btn btn-xs btn-info" th:onclick="editUser();'"> 编辑</span>
                            <!--<span data-toggle="tooltip"  data-placement="left"  titlele="删除用户" th:if="${QX.del == '1'}" class="btn btn-xs btn-danger" th:onclick="'delUser(\''+${user.user_id}+'\',\''+${user.pic_path}+'\');'"><i class="fa fa-trash-o"></i> 删除</span>-->
                            <!--<span data-toggle="tooltip"  data-placement="left" title="权限不够" th:unless="${QX.edit == '1' || QX.add == '1' || QX.del == '1'}" ><i class="fa fa-lock"></i> 无权限</span>-->
                        </div>
                        <!--<div th:if="${user.user_id == 1 && meid != '1'}">-->
                            <!--<span><i class="fa fa-lock"></i></span>-->
                        <!--</div>-->
                    </td>
                </tr>
                <tr th:unless="${QX.query == '1'}" >
                    <td colspan="7" align="center">
                        <h2>此用户无权限查看该页面</h2>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
</section>


<!-- 新增或修改的模态框 -->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center" id="usermodelHead">添加用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal"  role="form">
                    <!--<input type="hidden" name="name" value=""/>-->
                    <!--<input type="hidden" name="price" value=""/>-->
                    <!--<input type="hidden" name="area" value=""/>-->
                    <!--<input type="hidden" name="oldpath" value=""/>-->
                    <!--<div class="form-group" data-toggle="tooltip" title="如果不修改则不需要选择文件">-->
                        <!--<label for="imgfile" class="col-sm-2 control-label">上传头像</label>-->
                        <!--<div class="col-sm-10">-->
                            <!--<a href="javascript:void(0)"><input type="file" class="form-control file" name="imgfile" value="" id="imgfile" placeholder="请选择文件"></a>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group">-->
                        <!--<label for="imgfile" class="col-sm-2 control-label"></label>-->
                        <!--<div class="col-sm-10">-->
                            <!--<div><img src="" data-toggle="tooltip" title="当前头像或更新后的头像" id="showImg" style="width: 50px;"></div>-->
                        <!--</div>-->
                    <!--</div>-->

                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">用户名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" value="" id="name" placeholder="请输入用户名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">用户昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="price" value="" id="price" placeholder="请输入昵称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="area" class="col-sm-2 control-label">用户密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="area" value="" id="area" placeholder="请输入密码">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-success"  id="imgSubmit" >确定</button>
            </div>
        </div>
    </div>
</div>

<!--&lt;!&ndash; 角色权限模态框 &ndash;&gt;-->
<!--<div class="modal fade" id="edituserRoleModal" tabindex="-1" role="dialog"-->
     <!--aria-labelledby="myModalLabel" aria-hidden="true">-->
    <!--<div class="modal-dialog">-->
        <!--<div class="modal-content">-->
            <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal"-->
                        <!--aria-hidden="true">&times;</button>-->
                <!--<h4 class="modal-title text-center" id="userRoleModelHead">编辑角色权限</h4>-->
            <!--</div>-->
            <!--<div class="modal-body">-->
                <!--<div class="cbp">-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="modal-footer">-->
                <!--<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>-->
                <!--<button type="submit" class="btn btn-success"  id="roleSubmit" >确定</button>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->


<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<script th:src="@{/ztree/js/jquery.ztree.core.js}"></script>
<script th:src="@{/ztree/js/jquery.ztree.excheck.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<script th:src="@{/js/path.js}"></script>
<script>
    $(function(){
        //提示框
        $("[data-toggle='tooltip']").tooltip();
        //表格分页
        $('#roleList').DataTable({
            "scrollX"	  : true,
            'paging'      : true,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false,
            "pagingType"  : "full_numbers",
            "pageLength"  : 10
        });

        $("#addUser").click(function(){
            reloadModelData(_ctx+"/user/add","添加用户","添加","","","","","","","add");
            $("#userModal").modal("show");
        });

        //确认按钮
        $("#imgSubmit").click(function(){
            var id = $("input[name='user_id']").val();
            var oldpath = $("input[name='oldpath']").val();
            var url = $("input[name='url']").val();
            var base64Img= $("input[name='pics']").val();
            var username= $("input[name='username']").val();
            var nickName= $("input[name='nick_name']").val();
            var password= $("input[name='password']").val();
            if(url == _ctx+'/user/add'){
                if(!checkAccount(username,nickName,password)){
                    return false;
                }
            }
            $.ajax({
                type:"post",
                url:url,
                cache:false,
                dataType:"json",
                data:{user_id:userId,oldpath:oldpath,username:username,password:password,nick_name:nickName,pics:base64Img,time:new Date().getTime()},
                success:function(data){
                    if(data.status == 'success'){
                        $("#userModal").modal("hide");
                        window.location.href=window.location.href;
                    }else{
                        alert(data.msg);
                    }
                }
            });
        });



    //删除用户
    function delUser(userId,path){
        if(confirm("你确定要删除此用户吗？")){
            $.ajax({
                type:"POST",
                url:_ctx+"/user/del",
                dataType:"json",
                data:{user_id:userId,pic_path:path},
                cache:false,
                success:function(data){
                    if(data.status == 'success'){
                        window.location.href=window.location.href;
                    }else{
                        alert(data.msg);
                    }
                }
            });
        }
    }



    //编辑用户
    function editUser(user_id,username,nickName,path){
        console.log(user_id+","+username+","+nickName+","+path);
        reloadModelData(_ctx+"/apple/editApple","编辑用户","更新",id,"",path,username,nickName,"","edit");
        url,title,btntext,oldpath,rname,price,area,type
        $("#userModal").modal("show");
    }

    //验证数据
    function checkAccount(username,nickName,password){
        if(username == ''){
            $("input[name='username']").focus();
            alert("用户名不能为空");
            return false;
        }
        if(nickName == ''){
            $("input[name='nick_name']").focus();
            alert("昵称不能为空");
            return false;
        }
        if(password == ''){
            $("input[name='password']").focus();
            alert("密码不能为空");
            return false;
        }else if(password.length < 4){
            $("input[name='password']").focus();
            alert("密码个数不能少于4位");
            return false;
        }
        return true;
    }

    //加载模态框的数据
    function reloadModelData(url,title,btntext,oldpath,rname,price,area,type){
        $("#userModal #usermodelHead").text(title);
        $("#userModal #imgSubmit").text(btntext);
        $("#showImg").attr("src",oldpath);
        // $("input[name='url']").val(url);
        // $("input[name='id']").val(user_id);
        // $("input[name='pics']").val(pics);
        // $("input[name='oldpath']").val(oldpath);
        $("input[name='name']").val(name);
        $("input[name='price']").val(price);
        $("input[name='area']").val(area);
        if(type == 'add'){
            $("input[name='username']").attr("disabled",false);
        }else{
            $("input[name='username']").attr("disabled",true);
        }
    }

    var input = document.getElementById("imgfile");
    if (typeof (FileReader) === 'undefined') {
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }
    function readFile() {
        var file = this.files[0];
        //判断是否是图片类型
        if (!/image\/\w+/.test(file.type)) {
            alert("只能选择图片");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            base64Code=this.result;
            $("#userModal input[name='pics']").val(this.result);
            $("#showImg").attr("src",this.result);
        }
    }
</script>
</body>
</html>